<template>
  <div style="width: 100%" v-if="fileRecources && fileRecources.length > 0">
    <p>附件:</p>
    <div v-for="fileRecource in fileRecources" :key="fileRecource.id">
      <el-text class="mx-1" size="normal"
        >{{ fileRecource.name }}
        <el-button
          type="text"
          icon="download"
          size="large"
          @click="download(fileRecource.id)"
        ></el-button>
      </el-text>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, nextTick, onMounted } from "vue";
import { useResourceStore } from "@/stores/resource";

const props = defineProps({
  fileId: {
    type: String,
    default: "",
  },
});

const fileIds = computed(() => {
  return props.fileId.split(",");
});

const fileRecources = ref([]);

// const resourceInfo = ref({
//   id: "",
//   name: "",
//   fullPath: "",
//   subfix: "",
//   length: 0,
// });
const resourceStore = useResourceStore();

const loadResource = async (fileId) => {
  if (fileId && fileId.length > 0) {
    resourceStore
      .getResourceInfo({
        fileId: fileId,
      })
      .then((res) => {
        const resource = res;

        if (resource) {
          fileRecources.value.push(resource);
        }
      });
  }
};

const download = async (fileId) => {
  if (fileId && fileId.length > 0) {
    resourceStore.download({ fileId: fileId });
  }
};
onMounted(() => {
  fileIds.value.map((id) => {
    loadResource(id);
  });
});
</script>

<style lang="less" scoped></style>
